<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#fff" size="50"></u-icon>
			<text>基础设置</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<!-- 设备信息 -->
			<view class="collapse" v-for="(item,index) in itemList" :key="index">
				<view>
				<!-- 	<view class="coll-header">
						<view style="display: flex;">
							<view class="head-txt">设备列表</view>
						</view>
						<view class="sub-num" @click="changeContent(item,index)">展开
							<u-icon name="arrow-right" v-show="showUp" color="#999999" size="28"></u-icon>
							<u-icon name="arrow-down" v-show="!showUp" color="#999999" size="28"></u-icon>
						</view>
					</view> -->
					<!-- 展开 -->
					<view class="box">
						<view class="box-cont" v-if="item.open==true" v-for="(itemMsg,indexMsg) in item.body"
							:key="indexMsg">
							<view style="display: flex;">
								<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/baby.png"
									style="width: 80rpx;height: 80rpx;" mode=""></image>
								<text
									style="font-size: 32rpx;margin-left: 10rpx;margin-top: 20rpx;">{{itemMsg.msg}}</text>
							</view>
							<view style="margin-top: 20rpx;font-size: 32rpx;">在线
								<u-icon name="wifi" size="40" color="rgb(68,92,223)"></u-icon>
							</view>
							<view class="sub-num conList" v-show="showUpImg2" @click="changeImg2">
								<u-icon name="checkbox-mark" size="30" color="#fff"></u-icon>
							</view>
							<view class="conLists" v-show="!showUpImg2" @click="changeImg2"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 静音设置 -->
			<view class="mute">
				<view class="mute-join">
					<view
						style="height: 30rpx;width: 8rpx;background-color: rgb(68,92,223);border-radius:50rpx;position:absolute;top:28%;left:8%;">
					</view>
					<text style="position: absolute;top: 13%;left: 12%;font-size: 32rpx;font-weight: bold;">静音设置</text>
					<u-icon class="volume" name="volume-up-fill" color="rgb(68,92,223)" v-show="showUp1"
						@click="change1" size="60"></u-icon>
					<u-icon class="volume" name="volume-off-fill" color="rgb(68,92,223)" v-show="!showUp1"
						@click="change1" size="60"></u-icon>
				</view>
				<view
					style="height: 1rpx;background-color: rgb(245,245,245);width: 580rpx;margin: 30rpx;padding-left: 30rpx;">
				</view>
				<text class="open-mute">打开静音，设备将不再提供蜂鸣报警。若需要</text>
				<text class="open-mute">蜂鸣警报功能，请用户关闭静音设置。</text>
			</view>
			<!-- 基础设置 -->
			<view class="basics-set">
				<view class="basics">
					<view
						style="height: 30rpx;width: 8rpx;background-color: rgb(68,92,223);border-radius:50rpx;position:absolute;top:28%;left:8%;">
					</view>
					<text style="position: absolute;top: 13%;left: 12%;font-size: 32rpx;font-weight: bold;">基础设置</text>
				</view>

				<view class="basics-join">
					<text style="font-weight: bold;">测量间隔</text>
					<view class="pickr">
						<input
							style="float: left;margin-right: 5rpx;font-size: 22rpx;color:#898989;padding-left: 20rpx;"
							type="text" v-model="downminute" placeholder="1" @input="handleDownminuteInput" />
						<view class="line"></view>
						<text
							style="margin-right: 5rpx;font-size: 24rpx;color:rgb;position: absolute;top: 20%;right: 10%;">分钟</text>
					</view>
					<view style="height: 1rpx;background-color: rgb(247,244,247);margin-top: 30rpx;"></view>
				</view>
				<view class="basics-join">
					<text style="font-weight: bold;">上传时间</text>
					<view class="pickr">
						<input
							style="float: left;margin-right: 5rpx;font-size: 22rpx;color:#898989;padding-left: 20rpx;"
							type="text" v-model="upminute" placeholder="1" @input="handleUpminuteInput" />
						<view class="line"></view>
						<text
							style="margin-right: 5rpx;font-size: 24rpx;color:rgb;position: absolute;top: 20%;right: 10%;">分钟</text>
					</view>
					<view style="height: 1rpx;background-color: rgb(247,244,247);margin-top: 30rpx;"></view>
				</view>
				<view class="basics-join">
					<text style="font-weight: bold;">高温警报</text>
					<view class="pickr">
						<input
							style="float: left;margin-right: 5rpx;font-size: 22rpx;color:#898989;padding-left: 20rpx;"
							type="text" v-model="maxtemp" placeholder="1" @input="handleMaxtempInput" />
						<view class="line"></view>
						<text
							style="margin-right: 5rpx;font-size: 24rpx;color:rgb;position: absolute;top: 20%;right: 25%;">℃</text>
					</view>
					<view style="height: 1rpx;background-color: rgb(247,244,247);margin-top: 30rpx;"></view>
				</view>
				<view class="basics-join">
					<text style="font-weight: bold;">低温警报</text>
					<view class="pickr">
						<input
							style="float: left;margin-right: 5rpx;font-size: 22rpx;color:#898989;padding-left: 20rpx;"
							type="text" v-model="mintemp" placeholder="1" @input="handleMintempInput" />
						<view class="line"></view>
						<text
							style="margin-right: 5rpx;font-size: 24rpx;color:rgb;position: absolute;top: 20%;right: 25%;">℃</text>
					</view>
					<view style="height: 1rpx;background-color: rgb(247,244,247);margin-top: 30rpx;"></view>
				</view>
				<view class="tips">
					<!-- <view>***</view> -->
					<text>当用户测量温度大于设置的温度，并且持续时间大于设置时间时，设备将自动关机停止运行。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUp: true,
				showUp1: true,
				showUpImg2: false,
				disabled: false,
				mintemp: 35.6,
				maxtemp: 40.9,
				upminute: 1,
				downminute: 10,
				show: false,
				itemList: [{
					head: "考点名称1",
					subnum: '12',
					body: [{
							msg: '大宝',
							num: '3',
						},
						{
							msg: '大宝',
							num: '2',
						},
						{
							msg: '大宝',
							num: '2',
						}
					],
					open: false,
					disabled: true,
					imgUrl1: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/babyList.jpg',
					imgUrl2: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/babyList.jpg',

				}],


			}
		},
		onLoad() {
			
			this.$api.getDeviceList().then(res => {
				let list = []
				if (res.code === 200) {
					list = res.result.list
					if (!list.length) {
					
						return
					}
					list.forEach(ele => {
						if (ele.deviceStatus === 'Y') {
							
							this.getDeviceInfo(ele.code);
						
						}
					})
				}
			})
		},
		methods: {
			async getDeviceInfo(e) {
				let tpl_param = {
					code: e
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.getDeviceInfo(tpl_param);
				if (res.code == 200) {
					var row = res.result;
					this.mintemp = row.mintemp;
					this.maxtemp = row.maxtemp;
					this.upminute = row.maxtemp;
					this.downminute = row.downminute;
					this.showUp1 = row.isbeep; //静音

				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
			},
			async handleUpminuteInput(e) {
				if (!e.target.value) {
					return
				}
				let tpl_param = {
					upminute: e.target.value
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateUpminute(tpl_param);
				if (res.code == 200) {
					this.upminute = e.target.value;
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
			},
			async handleDownminuteInput(e) {

				if (!e.target.value) {
					return
				}
				let tpl_param = {
					downminute: e.target.value
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateDownminute(tpl_param);
				if (res.code == 200) {
					this.downminute = e.target.value;
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();

			},
			async handleMaxtempInput(e) {
				if (!e.target.value) {
					return
				}
				let tpl_param = {
					maxtemp: e.target.value
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateMaxmtemp(tpl_param);
				if (res.code == 200) {
					this.maxtemp = e.target.value;
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
			},
			async handleMintempInput(e) {
				if (!e.target.value) {
					return
				}
				let tpl_param = {
					mintemp: e.target.value
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateMintemp(tpl_param);
				if (res.code == 200) {
					this.mintemp = e.target.value;
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
			},
			navigateBack() {
				uni.switchTab({
					url: '../my'
				})
			},
			async change() {
				this.showUp = !this.showUp
			},
			async change1() {

				let tpl_param = {
					isbeep: this.showUp1
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateIsbeep(tpl_param);
				if (res.code == 200) {
					this.showUp1 = !this.showUp1
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
			},
			changeImg2: function() {
				undefined
				this.showUpImg2 = !this.showUpImg2
			},
			changeContent(item, index) {
				this.itemList.forEach(i => {
					if (i.open !== this.itemList[index].open) {
						i.open = false;
					}
				})
				item.open = !item.open
				this.showUp = !this.showUp
			}
		}

	}
</script>

<style scoped lang="scss">
	// 头部
	.tips{font-size: 24rpx;color: #999;margin-top:10rpx}
	.tips > view{text-align: center;}
	.tips image:first-child{}
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #fff;
		background-color: rgb(68, 92, 223);
	}

	.navbar>text {
		font-size: 36rpx;
		padding-left: 220rpx;
	}

	// 内容
	.section {
		background-color: rgb(245, 245, 245);
		padding: 30rpx;
		padding-bottom: 440rpx;
	}

	.section>view {
		position: relative;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}

	.collapse {
		padding: 0 36rpx;
	}

	.coll-header {
		display: flex;
		height: 140rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx;
	}

	.box {
		overflow: hidden;
		transition: all 0.3;
		border-bottom: 1px solid #F9F9F9;
	}

	.head-txt {
		margin-left: 15rpx;
		font-size: 32rpx;
		font-weight: 700;
	}

	.conList {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
		background-color: rgb(68, 92, 223);
		padding: 5rpx;
	}

	.conLists {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
		border: 1rpx solid rgb(68, 92, 223);
	}

	.box-cont {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;
	}

	.box-cont:last-child {
		margin-bottom: 20rpx;
	}


	// 静音设置
	.mute {
		height: 250rpx;
		padding: 30rpx;
	}

	.mute-join {
		position: relative;
		height: 50rpx;
	}

	.volume {
		position: absolute;
		top: 0%;
		right: 5%;
	}

	.open-mute {
		padding-left: 30rpx;
		padding-right: 30rpx;
		color: #333;
		font-size: 28rpx;
	}

	// 基础设置
	.basics-set {
		position: relative;
		padding: 30rpx;
	}

	.basics {
		position: relative;
		height: 50rpx;
	}

	.basics-join {
		position: relative;
		height: 80rpx;
		margin-bottom: 0rpx;
		font-size: 30rpx;
		padding: 50rpx;
	}

	.line {
		height: 1px;
		background-color: rgb(245, 245, 245);
		margin-top: 30rpx;
	}

	.pickr {
		height: 50rpx;
		border-radius: 50rpx;
		border: 1px solid rgb(183, 183, 183);
		width: 200rpx;
		float: right;
		padding: 6rpx;
		position: relative;
		color: #666;
	}

	.line {
		height: 50rpx;
		width: 1rpx;
		background-color: rgb(183, 183, 183);
		display: inline-block;
		position: absolute;
		top: -70%;
		left: 55%;
	}

	input {
		width: 80rpx;
	}
</style>
